<template>
  <v-card
    v-if="show"
    class="mt-2 ml-5"
    max-width="375"
    max-height="667"
    width="375"
    height="667"
  >
    <v-toolbar dense flat dark>
      <v-toolbar-title>{{ title }}</v-toolbar-title>
      <v-spacer></v-spacer>

      <v-btn icon @click="refresh">
        <v-icon>fa-sync-alt</v-icon>
      </v-btn>

      <v-btn icon @click="_onHide">
        <v-icon>fa-trash</v-icon>
      </v-btn>
    </v-toolbar>
    <div class="frame_container">
      <iframe
        ref="frame"
        name="frame"
        class="frame"
        :src="src"
      ></iframe>
    </div>
  </v-card>
</template>

<script>
import { VCard, VIcon, VToolbar } from "vuetify/lib";

export default {
  name: "Mview",

  components: { VCard, VToolbar, VIcon },

  data: () => ({
    show: true,
  }),

  props: {
    title: {
      type: String,
      default: "微博",
    },
    src: {
      type: String,
      default: "http://m.weibo.cn",
    },
  },

  methods: {
    _onShow() {
      this.show = true;
      this.$emit("on-show");
      this.refresh();
    },
    _onHide() {
      this.show = false;
      this.$emit("on-hide");
    },
    refresh() {
      console.log("refresh");
      window.open(this.src, "frame", "");
    }
  },
};
</script>

<style scoped>
.frame_container {
  width: 100%;
  height: 100%;
}

.frame {
  width: 100%;
  height: 100%;
  border: none;
}
</style>